﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电瓶车客户端</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <script type='text/javascript' src='http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936'></script>
    <style>
        .def_color {
            color: #ffffff;
        }

        .picWH {
            width: 1.2rem;
            height: 1.2rem
        }
    </style>
    <style type="text/css">
        #controller {
            width: 100%;
            border-bottom: 3px outset;
            height: 3rem;
            line-height: 3rem;
            filter: alpha(Opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            z-index: 10000;
            background-color: #1ab394;
            /*margin-left: 0.3rem;
            margin-top: 1.3rem*/
        }

        #container {
            height: 25rem;
            width: 18.75rem;
            /*margin-left: 0.3rem;*/
            margin-top: 0.5rem
        }

        .anchorBL {
            display: none;
        }

        btnstyle {
            background-color: rgb(0, 134, 229);
            margin-left: 0.5rem;
            color: white
        }
    </style>
    <script type="text/javascript">
        //获取所有点的坐标
        var points = [];
        var map;   //百度地图对象
        var car;   //汽车图标
        var label; //信息标签
        var centerPoint;

        var timer;     //定时器
        var index = 0; //记录播放到第几个point

        var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
        function init() {
            followChk = document.getElementById("follow");
            playBtn = document.getElementById("play");
            pauseBtn = document.getElementById("pause");
            resetBtn = document.getElementById("reset");

            //初始化地图,选取第一个点为起始点
            map = new BMap.Map("container");
            map.centerAndZoom(points[0], 15);
            map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。
            //map.addControl(new BMap.NavigationControl()); //设置地图平移缩放控件，PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置
            map.addControl(new BMap.ScaleControl());//设置比例尺控件
            //map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_TOP_LEFT }));//设置地图类型控件缩略地图控件，默认位于地图右下方,isOpen缩略图是否隐藏

            //通过DrivingRoute获取一条路线的point
            var driving = new BMap.DrivingRoute(map);
            driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));
            driving.setSearchCompleteCallback(function () {
                //得到路线上的所有point
                points = driving.getResults().getPlan(0).getRoute(0).getPath();
                //画面移动到起点和终点的中间
                centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
                map.panTo(centerPoint);
                //连接所有点
                map.addOverlay(new BMap.Polyline(points, { strokeColor: "green", strokeWeight: 6, strokeOpacity: 1 }));

                //显示小车子
                label = new BMap.Label("", { offset: new BMap.Size(-40, -40) });
                label.setStyle({
                    //color: "#fff",
                    fontSize: "12px",
                    backgroundColor: "0.05",
                    border: "1",
                    fontWeight: "bold",
                    width: "120px",
                });
                car = new BMap.Marker(points[0]);
                car.setLabel(label);
                map.addOverlay(car);

                //点亮操作按钮
                playBtn.disabled = false;
                resetBtn.disabled = false;
            });
        }

        function play() {
            playBtn.disabled = true;
            pauseBtn.disabled = false;

            var point = points[index];
            if (index > 0) {
                map.addOverlay(new BMap.Polyline([points[index - 1], point], { strokeColor: "red", strokeWeight: 3, strokeOpacity: 1 }));
            }
            label.setContent("经度:" + point.lng + "<br>纬度: " + point.lat);
            car.setPosition(point);
            index++;
            if (followChk.checked) {
                map.panTo(point);
            }
            if (index < points.length) {
                timer = window.setTimeout("play(" + index + ")", 200);
            } else {
                playBtn.disabled = true;
                pauseBtn.disabled = true;
                map.panTo(point);
            }
        }

        function pause() {
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if (timer) {
                window.clearTimeout(timer);
            }
        }

        function reset() {
            followChk.checked = false;
            playBtn.disabled = false;
            pauseBtn.disabled = true;

            if (timer) {
                window.clearTimeout(timer);
            }
            index = 0;
            car.setPosition(points[0]);
            map.panTo(centerPoint);
        }


    </script>
</head>
<body>

    <div class="page-group" id="">
        <div class="page">
            <header class="bar bar-nav" style="background-color:black">
                <a class="icon icon-edit pull-left  open-panel def_color" data-panel='#panel-left-demo'></a>
                <!--<a class="icon pull-right def_color add_btn" style="font-size: 0.8rem;color:white" @click="outLogin()">退出</a>-->
                <h1 class="title" style="color:white">车辆轨迹</h1>
            </header>
            <!-- 工具栏 -->
            <nav class="bar bar-tab">
                <a class="tab-item external " href="index_police.html">
                    <span class="icon icon-message"></span>
                    <span class="tab-label">报警</span>
                </a>
                <a class="tab-item external active" href="index_path.html">
                    <span class="icon icon-browser"></span>
                    <span class="tab-label">轨迹</span>
                </a>
            </nav>
            <div class="content">
                <div id="controller" align="center">
                    <input id="follow" type="checkbox" checked /><span style="font-size:12px;color:white">画面跟随</span>
                    <input id="play" type="button" value="播放" checked onclick="play();" class=" btn btn-sm btn-primary " style="background-color: rgb(0, 134, 229);margin-left: 0.5rem;color: white" />
                    <input id="pause" type="button" value="暂停" checked onclick="pause();" class="btn btn-sm btn-primary " style="background-color: rgb(0, 134, 229);margin-left: 0.5rem;color: white" />
                    <input id="reset" type="button" value="重置" checked onclick="reset()" class=" btn btn-sm btn-primary " style="background-color: rgb(0, 134, 229);margin-left: 0.5rem;color: white" />
                </div>
                <div id="container"></div>
                <!--<div class="content-block">
                  <p><a href="#" class="button button-fill open-panel" >打开左侧栏</a></p>
                </div>-->
            </div>-->
        </div>
    </div>
    <div class="panel-overlay"></div>
    <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
        <div class="content-block" id="el">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">车牌号</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入" v-model="checkdata.car_brand" id="car_brand">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-email"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">车架号</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入" v-model="checkdata.car_frame_number" id="car_frame_number">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-email"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">备案号</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入" v-model="checkdata.robber_number" id="robber_number">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- Date -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">开始</div>
                                <div class="item-input">
                                    <input type="text" placeholder="2018-08-30" v-model="checkdata.startTime" id="startTime">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">结束</div>
                                <div class="item-input">
                                    <input type="text" placeholder="2018-08-30" v-model="checkdata.endTime" id="endTime">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <p><a href="#" class="button disabled" @click="confirm()">查询</a></p>
            <p><a href="#" class="close-panel" id="close">关闭</a></p>
        </div>
        <div class="list-block">
            <!-- .... -->
        </div>
    </div>
    <div class="panel panel-right panel-reveal">
        <div class="content-block">
            <p>这是一个侧栏</p>
            <!-- Click on link with "close-panel" class will close panel -->
            <p><a href="#" class="close-panel">关闭</a></p>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script src="js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#el',
            data: {
                localurl: 'http://101.132.109.236:8081',
                checkdata: {
                    car_brand: '',
                    car_frame_number: '',
                    robber_number: '',
                    startTime: '',
                    endTime: ''
                }
            },
            created: function () {
                ////this.loadinfo();
                //init();
            },
            methods: {
                confirm: function () {
                    if (vm.checkdata.car_brand == '' && vm.checkdata.car_frame_number == '' && vm.checkdata.robber_number == '') {
                        $.toast("车牌号、车架号、备案号，请输入一个");
                        return;
                    }
                    vm.loadinfo();
                },
                loadinfo: function () {
                    var act = "1=1";
                    if (vm.checkdata.car_brand) {
                        act += '&car_brand=' + vm.checkdata.car_brand;
                    }
                    if (vm.checkdata.car_frame_number) {
                        act += '&car_frame_number=' + vm.checkdata.car_frame_number;
                    }
                    if (vm.checkdata.robber_number) {
                        act += '&robber_number=' + vm.checkdata.robber_number;
                    }
                    if (vm.checkdata.startTime) {
                        act += '&startTime=' + vm.checkdata.startTime;
                    }
                    if (vm.checkdata.endTime) {
                        act += '&endTime=' + vm.checkdata.endTime;
                    }
                    var token = localStorage.getItem("token");
                    $.ajax({
                        url: '' + this.localurl + '/Car/QueryPositions?' + act,
                        data: '',
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: "POST",
                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else if (JSON.stringify(data) != "[]") {
                                $.closePanel()
                                $.toast("查询成功,点击播放");
                                let obj = data;
                                for (let i in obj) {
                                    console.log(i);	//a b c d
                                    console.log(obj[i]);	// aa bb cc dd
                                    console.log(obj[i].lat, obj[i].lng)
                                    points[i] = new BMap.Point(obj[i].lat, obj[i].lng);
                                };
                                console.log(points)
                                init();
                            }
                            else if (JSON.stringify(data) == "[]") {
                                $('#container').html("");
                            }
                        },
                        error: function () {

                        }
                    });
                }
            }
        })
    </script>
</body>
</html>
